<template>
	<view class="main">
		<view class="welcome">
			注册账号
		</view>

		<input class="input" placeholder="请输入手机号" v-model="params.name"/>
		<input class="input" placeholder="请输入公司名称"  v-model="params.nickname"/>
		<input class="input" placeholder="请输入手机号"  v-model="params.phone"   type="number" maxlength="11"/>

		<view class="row">
			<input class="left" placeholder="请输入6位验证码" v-model="params.captcha" maxlength="6" />

			<view class="right2" @click="getCapter" v-if="params.phone.length==11 && time==60">获取验证码</view>
			<view class="right" v-else-if="time<60">再次获取{{time }}S</view>
			<view class="right" v-else-if="time==60">获取验证码</view>
		</view>

		<input class="input" placeholder="请设置登录密码" v-model="params.password" password/>
		<input class="input" placeholder="请再次输入登录密码" v-model="params.password2" password/>
		<view class="btn" @click="goRegiste">注册</view>
		<view class="row-between">
			<view class="forget">已有账号？</view>
			<view class="registe" @click="goBack()">立即登录</view>
		</view>
		<view style="height: 60rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				      params: {
				        nickname: ''
				        , name: ''
				        , phone: ''
				        , captcha: ''
				        , password: ''
				        , category: 'mng_user_category_common'
				      }
				      , time: 60
			};
		},
		methods:{
			goBack(){
				uni.navigateBack()
			},
			   changePhone(e) {
			      if (this.params.phone.length > 11) {
			        this.params.phone = this.params.phone.slice(0, 11)
			      }
			      console.log(this.params.phone)
			      this.$forceUpdate()
			    }
			    , async goRegiste() {
			      if (!this.params.name) {
			        this.$noIconTost('请输入用户名')
			        return
			      }
			
			      if (!this.params.nickname) {
			        this.$noIconTost('请输入公司名')
			        return
			      }
			      if (this.params.phone.length != 11) {
			        this.$noIconTost('请输入正确手机号')
			        return
			      }
			      if (this.params.captcha.length != 6) {
			        this.$noIconTost('请输入正确验证码')
			        return
			      }
			      if (this.params.password.length < 6) {
			        this.$noIconTost('请输入不小于6位的密码')
			        return
			      }
			      if (this.params.password2 != this.params.password) {
			        this.$noIconTost('两次密码不一致')
			        return
			      }
				  
				  
				  let res = await this.$req({
				  	url: `/mng/user/register/phoneAndCaptcha`,
				  	method:'post',
				  	data:this.params
				  })
			      if (res.code == 200) {
			        this.$noIconTost('注册成功,请登录')
			        setTimeout(() => {
						uni.navigateBack()
			        }, 500)
			      }
			    }
			    , async getCapter() {
			      if (this.params.phone.length < 11) {
			        this.$noIconTost('请输入正确的手机号')
			      }
				  
				  let res = await this.$req({
				  	url: `/mng/common/smsRegister/${this.params.phone}`,
				  	method:'post',
				  })
				  
			      if (res.code == 200) {
			        this.$noIconTost('验证码已发送')
			        this.countDown()
			      }
			    }
			    , countDown() {
			      const aa = setInterval(() => {
			        this.time--
			        if (this.time == 0) {
			          clearInterval(aa)
			        }
			      }, 1000)
			    }
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: white;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		align-items: center;
	}

	.logo {
		margin-top: 60rpx;
		width: 196rpx;
		height: 196rpx;
	}

	.title {
		margin-top: 32rpx;
		font-size: 48rpx;
		font-weight: 600;
		color: #2A2F3E;
		line-height: 64rpx;
	}

	.welcome {
		margin-top: 60rpx;
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2A2F3E;
		line-height: 56rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 80rpx;
		width: calc(100% - 96rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.input {
		padding-left: 32rpx;
		margin-top: 40rpx;
		width: calc(100% - 96rpx);
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 2rpx solid #CDD5DF;

		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		width: calc(100% - 48rpx);
		height: 96rpx;
		background: #004E96;
		border-radius: 8rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 48rpx;

	}

	.btn-text {}

	.row-between {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.registe {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #004E96;
		line-height: 44rpx;
	}

	.forget {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;

	}
	.row{
		display: flex;
		width: 100%;
		margin-left: 48rpx;
		height: 96rpx;
		align-items: center;
			margin-top: 40rpx;
	}
	.left {
	    width: 320rpx;
		padding-left: 32rpx;
	
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		border: 2rpx solid #CDD5DF;
		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111F3A;
		line-height: 44rpx;
	}
	.right {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-left: 16rpx;
	    width: 192rpx;
	    height: 96rpx;
	    background: #f6f7fb;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #111f3a;
	    line-height: 44rpx;
	}
	.right2 {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    margin-left: 16rpx;
	width: 192rpx;
	height: 96rpx;
	    background: #004e96;
	    font-size: 28rpx;
	    font-weight: 400;
	    color: #fff;
	    line-height: 44rpx;
	}
</style>
